<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6 lt8"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7 lt8"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8 lt8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
        <title>List Supermarket</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="List Supermarket" />
        <link rel="shortcut icon" href="imagenes/favicon.png"> 
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/animate-custom.css" />

    </head>
    <body>
        <div class="container">
            <!-- Codrops top bar --><!--/ Codrops top bar -->
          <header></header>
            <section>				
                <div id="container_demo" >
                    <a class="hiddenanchor" id="toregister"></a>
                    <a class="hiddenanchor" id="tologin"></a>
                    <div id="wrapper">
                        <div id="login" class="animate form">
                            <form  action="LoginServlet" autocomplete="on" method="post"> 
                               <p> <img src="imagenes/logo.png" width="300" height="59"> </p><br/>
                                <p> 
                                    <label for="mail_user" class="uname" data-icon="u" > Email </label>
                                    <input id="mail_user" name="mail_user" required type="text" placeholder="Correo electrónico"/>
                                </p>
                                <p> 
                                    <label for="pass_user" class="youpasswd" data-icon="p"> Contraseña</label>
                                    <input id="pass_user" name="pass_user" required type="password" placeholder="eg. X8df!90EO" /> 
                                </p>
                                <p class="login button"> 
                                    <input type="submit" value="Ingresa" /> 
								</p>
                                <p class="change_link">
									¿Aún no te registras?
									<a href="#toregister" class="to_register">Regístrate</a>
								</p>
                            </form>
                        </div>

                        <div id="register" class="animate form">
                            <form  action="" autocomplete="on"> 
                                <p> <img src="imagenes/logo.png" width="300" height="59"> </p><br/>
                                <p> 
                                  <label for="nom_user" class="uname" data-icon="u">Nombre</label>
                                  <input id="nom_user" name="nom_user" required type="text" placeholder="Nombre" />
                              </p>
                                <p> 
                                  <label for="ape_pat_user" class="uname" data-icon="u">Apellido Paterno</label>
                                  <input id="ape_pat_user" name="ape_pat_user" required type="text" placeholder="Apellido Paterno" />
                                </p>
                                <p> 
                                  <label for="ape_mat_user" class="uname" data-icon="u">Apellido Materno</label>
                                  <input id="ape_mat_user" name="ape_mat_user" required type="text" placeholder="Apellido Materno" />
                                </p>
                                <p> 
                                  <label for="mail_user" class="youmail" data-icon="e" > Email</label>
                                  <input id="mail_user" name="mail_user" required type="email" placeholder="Correo electrónico"/> 
                                </p>
                              <p> 
                                    <label for="pass_user" class="youpasswd" data-icon="p">Contraseña </label>
                                    <input id="pass_user" name="pass_user" required type="password" placeholder="eg. X8df!90EO"/>
                              </p>
                              <p class="signin button"> 
								<input type="submit" value="Guardar"/> 
							  </p>
                                <p class="change_link">  
									Ingresa a tu cuenta
									<a href="#tologin" class="to_register"> Ingresa </a>
								</p>
                          </form>
                        </div>						
                    </div>
              </div>  
          </section>
        </div>
    </body>
</html>